@import "../../../colors";
@import "../../../frameless";

$teacher-spot: $ui-purple-dark;
$story-width: $cols3;

#view {
    padding: 0;
}

.educators {
    .intro {
        margin: 0;
    }

    b {
        font-weight: bold;
    }

    a {
        white-space: normal;
    }

    .title-banner {
        &.masthead {
            background-color: $teacher-spot;
            padding-bottom: 0;
            margin-bottom: 0;

            h1 {
                margin: 0;
                color: $ui-white;
            }


            .masthead-info {
                display: flex;
                align-items: center;
                justify-content: space-between;

                p {
                    margin: 0;
                    max-width: $cols6;
                    text-align: left;
                    color: $ui-white;

                    a {
                        border-bottom: 1px solid $ui-white;
                        color: $ui-white;
                    }
                }
            }

            .video-player {
                position: relative;
                margin-bottom: $gutter;
                border: .25rem solid $ui-white-15percent;
                border-radius: 10px;
                width: $cols4;
                height: $cols4 * .5625;
                overflow: hidden;

                iframe {
                    border: 0;
                    width: inherit;
                    height: inherit;
                }
            }

            .band {
                $band-color: $box-shadow-light-gray;

                margin-top: 2rem;
                background-color: $band-color;
                padding: 1rem 0;
            }
        }
    }

    .feature {
        background-color: $ui-blue-10percent;
        margin-bottom: 2.75rem;

        section#sip {
            padding-top: .5rem;
            padding-bottom: .5rem;
            margin-bottom: .5rem;
        }

        .educators-using {
            justify-content: flex-start;
            align-items: start;

            .using-scratch-image {
                max-width: 420px;
                padding: 2.75rem 2rem;

                img {
                    width: 100%;
                    border-radius: .5rem;
                }
            }

            .sip-info {
                max-width: 21.75rem;
                padding-left: 2rem;
                padding-right: 2rem;
                padding-bottom: 2rem;

                h2 {
                    line-height: 2.7rem;
                }

                p {
                    margin-top: 1.25rem;
                    margin-bottom: 1.25rem;
                }
            }

            .sip-button {
                font-size: 1rem;
            }
        }
    }

    .educator-community {
        margin-bottom: 2rem;
        text-align: left;
        justify-content: space-between;
        align-items: flex-start;

        div {
            max-width: 24rem;
        }
    }

    .guides-and-tutorials {
        div {
            max-width: 16rem;
            text-align: center;
        }
        .icon-wrapper {
            height: 150px;

            img.sip-icon {
                padding: 1.75rem;
                width: 130px;
            }
            img.resources-icon {
                padding: 1.5rem;
                width: 100px;
            }
            img.creativecomputing-icon {
                padding: 1.5rem;
                width: 85px;
            }
        }
    }

    section {
        .nav-spacer { // For making the anchors work.
            display: block;
            visibility: hidden;
            margin-top: -2.5rem;
            height: 2.5rem;
        }

        margin-bottom: 3rem;

        h2 {
            margin-bottom: .75rem;
            text-align: center;
        }
    }

    #teacher-accounts {
        margin-bottom: -3px;
        background-color: $teacher-spot;
        padding: 50px 0;
        width: 100%;
        overflow-x: hidden;

        .inner {
            display: flex;
            height: 100%;
            align-items: center;
        }

        p {
            margin: 0;
            text-align: left;
            color: $ui-white;

            a {
                border-bottom: 1px solid $ui-white;
                color: $ui-white;
            }
        }

        h2 {
            margin: 0 0 2rem 0;
            text-align: left;
            line-height: normal;
            color: $ui-white;
        }

        .teacher-account-buttons {
            li {
                border: 2px solid $ui-white;
                padding: 16px;
                font-size: 16px;
                font-weight: 500;
            }
        }

        #left {
            width: $cols4;
            max-width: $cols4;

            text-align: left;

            p {
                margin-bottom: 3.5rem;
            }
        }

        img {
            width: $cols7;
        }
    }
}

//4 columns
@media #{$small} {
    $story-width: $cols4;

    .stories {
        width: $cols4;
    }

    .story {
        width: $story-width;

        img {
            width: $story-width;
        }
    }

    .title-banner {
        &.masthead {
            padding-bottom: 2rem;
        }

        .band {
            display: none;
        }
    }

    .flex-row {
        &.sidebar-row {

            .body-copy {
                width: 100%;
            }
        }
    }

    .educators {
        .feature {
            .educators-using {
                max-width: 484px;
            }

            .sip-info {
                text-align: center;
                padding-top: 0;
                margin: auto;

                h2 {
                    text-align: center;
                }
            }
        }
    }

    #teacher-icon {
        display: none;
    }

    .in-practice {
        text-align: center;
    }

    .flex-row {
        align-items: center;
    }

    .story {
        margin-left: 50px;
    }

    .general-usage {
        align-items: center;
    }

    .guides-and-tutorials {
        align-items: center;
    }

    .account-flex {
        justify-content: center;
    }
}

//6 columns
@media #{$medium} {
    $story-width: $cols3;

    .stories {
        width: $cols6;
    }

    .story {
        width: $story-width;
    }

    .educators {
        .feature {
            .educators-using {
                max-width: 484px;
            }

            .sip-info {
                text-align: center;
                padding-top: 0;
                margin: auto;

                h2 {
                    text-align: center;
                }
            }
        }
    }

    #teacher-icon {
        display: none;
    }

    .flex-row {
        &.sidebar-row {

            .body-copy {
                width: 100%;
            }

            .sidebar {
                margin: 0 auto;
            }
        }
    }

    .in-practice {
        text-align: center;
    }

    .flex-row {
        align-items: center;
    }

    .story {
        margin-left: 50px;
    }

    .general-usage {
        align-items: center;
    }

    .guides-and-tutorials {
        align-items: center;
    }

    .account-flex {
        justify-content: center;
    }
}


//8 columns
@media #{$intermediate} {
    $story-width: $cols4;

    .stories {
        width: $cols8;
    }

    .story {
        width: $story-width;
    }

    .masthead {
        h1 {
            text-align: center;
        }

        .subnav {
            justify-content: center;
        }
    }

    .masthead-info {
        p {
            width: $cols4;
        }

        iframe {
            width: $cols4;
            box-sizing: border-box;
        }
    }

    #view {
        text-align: left;
    }

    .flex-row {
        &.sidebar-row {

            .body-copy {
                width: 100%;
            }

            .sidebar {
                margin: 0 auto;
            }
        }
    }

    .educators {
        #resources {
            margin: 0 auto;
            width: $cols6;

            .educator-community {
                justify-content: center;
            }

            #guides-header {
                margin: auto;
                width: $cols6;
                text-align: left;
            }

            .guides-and-tutorials {
                div {
                    display: flex;
                    max-width: 16rem;
                    text-align: left;
                    justify-content: space-between;
                }

                p {
                    width: $cols4;
                }

                img {
                    margin: 0;
                    width: $cols2;
                }
            }
        }

        .feature {
            .educators-using {

                .using-scratch-image {
                    max-width: 300px;
                    padding: 2.75rem 1.25rem;
                }

                .sip-info {
                    padding-top: 2rem;

                    h2 {
                        text-align: left;
                    }
                }
            }
        }
    }

    section {
        p {
            width: 100%;
        }
    }

    .guides-and-tutorials {
        margin-bottom: 2rem;
        justify-content: space-around;
        align-items: flex-start;
    }

    #teacher-accounts {
        .inner {
            justify-content: space-between;
        }
    }

    #left {
        width: $cols4;
    }
}

// 12 columns
@media #{$big} {
    $story-width: $cols3;

    .stories {
        width: $cols12;
    }

    .story {
        width: $story-width;
    }

    .masthead {
        h1 {
            text-align: left;
        }

        .sub-nav {
            justify-content: flex-start;
        }
    }

    .general-usage {
        align-items: flex-start;
    }

    .guides-and-tutorials {
        align-items: flex-start;
        justify-content: space-between;
    }

    .account-flex {
        justify-content: space-between;
    }

    .feature {
        .sip-info {
            padding-top: 2rem;

            h2 {
                text-align: left;
            }
        }
    }
}
